import { User } from '../../types/user'

interface UserTableProps {
  users: User[]
  onEdit: (user: User) => void
  onDelete: (id: string) => void
  onChangePassword: (userId: string) => void
  onResetPassword: (userId: string) => void
}

export default function UserTable({ 
  users, 
  onEdit, 
  onDelete,
  onChangePassword,
  onResetPassword 
}: UserTableProps) {
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full divide-y divide-gray-200/20">
        <thead>
          <tr>
            <th className="px-6 py-3 text-left text-white">姓名</th>
            <th className="px-6 py-3 text-left text-white">邮箱</th>
            <th className="px-6 py-3 text-left text-white">角色</th>
            <th className="px-6 py-3 text-left text-white">创建时间</th>
            <th className="px-6 py-3 text-left text-white">操作</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200/20">
          {users.map((user) => (
            <tr key={user.id}>
              <td className="px-6 py-4 text-white/90">{user.name}</td>
              <td className="px-6 py-4 text-white/90">{user.email}</td>
              <td className="px-6 py-4 text-white/90">{user.role}</td>
              <td className="px-6 py-4 text-white/90">{user.createdAt}</td>
              <td className="px-6 py-4 space-x-2">
                <button onClick={() => onEdit(user)} className="text-blue-300 hover:text-blue-100">编辑</button>
                <button onClick={() => onChangePassword(user.id)} className="text-emerald-300 hover:text-emerald-100">修改密码</button>
                <button onClick={() => onResetPassword(user.id)} className="text-amber-300 hover:text-amber-100">重置密码</button>
                <button onClick={() => onDelete(user.id)} className="text-rose-300 hover:text-rose-100">删除</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
} 